<template>
  <template v-if="$status==='CONNECTED'">
    <el-space>
      <el-input-number :disabled="status.loading" v-model="length"></el-input-number>
      <el-button :loading="status.loading" @click="test">test</el-button>
      <el-progress
          :percentage="percentage"
          :stroke-width="24"
          text-inside
          status="success"
          style="width: 300px"
      ></el-progress>
    </el-space>
  </template>
  <el-button
      v-else
      size="large" type="primary" plain
      :loading="$status==='CONNECTING'"
      @click="open"
  >connect valar server
  </el-button>
</template>

<script setup lang="ts">
import {useMorghulisChannel} from "../../morghulis/hooks/channel.ts";
import {ref} from "vue";
import {$message} from "../../morghulis/tools/feedback.ts";
import type {MorghulisChannel} from "../../morghulis/types/tool/channel.types.ts";
import {useMorghulisSockets} from "../../morghulis/hooks/socket.ts";

const {open, status: $status} = useMorghulisSockets()

const {register, activate, status} = useMorghulisChannel()

const length = ref(50)
const percentage = ref(0)


//
const channel: MorghulisChannel = {
  start: () => {
    percentage.value = 0
  },
  stop: () => {
    percentage.value = 0
  },
  proceed: (payload) => {
    const {index, length} = payload
    percentage.value = index * 100 / length
  }
}
register('test', channel)

function test() {
  activate({length: length.value})
}

</script>

<style scoped>

</style>